<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>合成大西瓜</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
    <style>
        /* 基础样式和变量 */
        :root {
            --primary-color: #4a6fa5;
            --secondary-color: #6c8ebd;
            --background-color: #f5f7fa;
            --card-background: #ffffff;
            --text-color: #333333;
            --border-color: #e0e0e0;
            --error-color: #e74c3c;
            --success-color: #2ecc71;
            --shadow-color: rgba(0, 0, 0, 0.1);
            --font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            --tip-background: #e3f2fd;
            --game-bg: #87CEEB;
            --container-bg: #F0F8FF;
        }

        /* 暗黑模式变量 */
        [data-theme="dark"] {
            --primary-color: #5b8ad6;
            --secondary-color: #7fa3d7;
            --background-color: #1a1a2e;
            --card-background: #222438;
            --text-color: #e0e0e0;
            --border-color: #444444;
            --shadow-color: rgba(0, 0, 0, 0.3);
            --tip-background: #1a2a3a;
            --game-bg: #2c3e50;
            --container-bg: #34495e;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: var(--font-family);
            background-color: var(--background-color);
            color: var(--text-color);
            line-height: 1.6;
            transition: background-color 0.3s, color 0.3s;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
        }

        /* 头部样式 */
        header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 30px;
            padding-bottom: 15px;
            border-bottom: 1px solid var(--border-color);
        }

        header h1 {
            font-size: 2rem;
            color: var(--primary-color);
        }

        /* 头部控件区域 */
        .header-controls {
            display: flex;
            align-items: center;
            gap: 15px;
        }

        /* 分享按钮 */
        .share-button {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 2px 6px;
            background-color: var(--secondary-color);
            color: white;
            border-radius: 15px;
            cursor: pointer;
            font-size: 14px;
            transition: background-color 0.3s, transform 0.1s;
        }

        .share-button:hover {
            background-color: var(--primary-color);
        }

        .share-button:active {
            transform: scale(0.98);
        }

        .share-button i {
            font-size: 16px;
        }

        /* 主题切换开关 */
        .theme-toggle {
            position: relative;
        }

        .theme-switch {
            opacity: 0;
            position: absolute;
        }

        .theme-switch-label {
            display: flex;
            align-items: center;
            justify-content: space-between;
            cursor: pointer;
            width: 50px;
            height: 26px;
            background-color: #83d8ff;
            border-radius: 100px;
            position: relative;
            transition: background-color 0.3s;
            padding: 0 5px;
        }

        .theme-switch:checked + .theme-switch-label {
            background-color: #4a4e69;
        }

        .theme-switch-label .fa-sun {
            color: #f39c12;
        }

        .theme-switch-label .fa-moon {
            color: #f1c40f;
        }

        .theme-switch-label .slider {
            position: absolute;
            width: 22px;
            height: 22px;
            border-radius: 50%;
            transition: 0.3s;
            background-color: white;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
            left: 2px;
        }

        .theme-switch:checked + .theme-switch-label .slider {
            transform: translateX(24px);
        }

        /* 主内容区域 */
        main {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            position: relative;
            padding: 20px 0;
        }

        /* 游戏信息面板 */
        .game-info {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
            max-width: 400px;
            margin-bottom: 20px;
            padding: 15px;
            background: var(--card-background);
            border-radius: 15px;
            box-shadow: 0 4px 15px var(--shadow-color);
        }

        .score-display {
            font-size: 1.2rem;
            font-weight: bold;
            color: var(--primary-color);
        }

        .level-display {
            font-size: 1rem;
            color: var(--text-color);
        }

        /* 游戏容器 */
        .game-container {
            width: 400px;
            height: 600px;
            background: var(--game-bg);
            border: 3px solid var(--border-color);
            border-radius: 20px;
            position: relative;
            overflow: hidden;
            box-shadow: 0 8px 25px var(--shadow-color);
        }

        /* 游戏区域 */
        .game-area {
            width: 100%;
            height: 100%;
            position: relative;
            background: linear-gradient(180deg, rgba(255,255,255,0.1) 0%, transparent 100%);
        }

        /* 顶部危险线 */
        .danger-line {
            position: absolute;
            top: 80px;
            left: 0;
            right: 0;
            height: 2px;
            background: linear-gradient(90deg, transparent, var(--error-color), transparent);
            opacity: 0.7;
            z-index: 10;
        }

        /* 水果样式 */
        .fruit {
            position: absolute;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.2rem;
            font-weight: bold;
            color: white;
            text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 2px 8px rgba(0,0,0,0.3);
            user-select: none;
        }

        .fruit:hover {
            transform: scale(1.05);
        }

        /* 水果等级样式 */
        .fruit-1 { width: 30px; height: 30px; background: linear-gradient(135deg, #8e44ad, #9b59b6); } /* 葡萄 */
        .fruit-2 { width: 35px; height: 35px; background: linear-gradient(135deg, #e74c3c, #c0392b); } /* 樱桃 */
        .fruit-3 { width: 40px; height: 40px; background: linear-gradient(135deg, #f39c12, #e67e22); } /* 橘子 */
        .fruit-4 { width: 45px; height: 45px; background: linear-gradient(135deg, #f1c40f, #f39c12); } /* 柠檬 */
        .fruit-5 { width: 50px; height: 50px; background: linear-gradient(135deg, #27ae60, #2ecc71); } /* 猕猴桃 */
        .fruit-6 { width: 55px; height: 55px; background: linear-gradient(135deg, #e74c3c, #c0392b); } /* 西红柿 */
        .fruit-7 { width: 60px; height: 60px; background: linear-gradient(135deg, #fd79a8, #e84393); } /* 桃子 */
        .fruit-8 { width: 70px; height: 70px; background: linear-gradient(135deg, #fdcb6e, #e17055); } /* 菠萝 */
        .fruit-9 { width: 80px; height: 80px; background: linear-gradient(135deg, #8b4513, #a0522d); } /* 椰子 */
        .fruit-10 { width: 100px; height: 100px; background: linear-gradient(135deg, #00b894, #00a085); } /* 西瓜 */

        /* 下一个水果预览 */
        .next-fruit {
            position: absolute;
            top: 20px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 20;
            opacity: 0.8;
        }

        /* 控制按钮 */
        .game-controls {
            display: flex;
            justify-content: center;
            gap: 15px;
            margin-top: 20px;
        }

        .control-btn {
            padding: 10px 20px;
            background: var(--primary-color);
            color: white;
            border: none;
            border-radius: 25px;
            cursor: pointer;
            font-size: 1rem;
            transition: all 0.3s ease;
            box-shadow: 0 4px 15px rgba(0,0,0,0.2);
        }

        .control-btn:hover {
            background: var(--secondary-color);
            transform: translateY(-2px);
        }

        .control-btn:active {
            transform: translateY(0);
        }

        /* 游戏结束遮罩 */
        .game-over {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0,0,0,0.8);
            display: none;
            align-items: center;
            justify-content: center;
            z-index: 100;
        }

        .game-over-content {
            background: var(--card-background);
            padding: 30px;
            border-radius: 20px;
            text-align: center;
            box-shadow: 0 10px 30px rgba(0,0,0,0.5);
        }

        .game-over h2 {
            color: var(--error-color);
            margin-bottom: 15px;
        }

        .final-score {
            font-size: 1.5rem;
            color: var(--primary-color);
            margin-bottom: 20px;
        }

        /* 合成特效 */
        .merge-effect {
            position: absolute;
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(255,215,0,0.8) 0%, transparent 70%);
            animation: mergeRipple 0.6s ease-out;
            pointer-events: none;
            z-index: 50;
        }

        @keyframes mergeRipple {
            0% {
                transform: scale(0);
                opacity: 1;
            }
            100% {
                transform: scale(2);
                opacity: 0;
            }
        }

        /* 分数动画 */
        .score-animation {
            position: absolute;
            font-size: 1.5rem;
            font-weight: bold;
            color: #FFD700;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
            opacity: 0;
            animation: scoreRise 1.5s ease-out forwards;
            pointer-events: none;
            z-index: 60;
        }

        @keyframes scoreRise {
            0% {
                transform: translateY(0) scale(0.5);
                opacity: 1;
            }
            50% {
                transform: translateY(-30px) scale(1.2);
                opacity: 1;
            }
            100% {
                transform: translateY(-80px) scale(1);
                opacity: 0;
            }
        }

        /* 分享通知样式 */
        .share-notification {
            position: fixed;
            bottom: 20px;
            right: 20px;
            background-color: var(--success-color);
            color: white;
            padding: 10px 20px;
            border-radius: 4px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
            transform: translateY(100px);
            opacity: 0;
            transition: transform 0.3s, opacity 0.3s;
            z-index: 1000;
        }

        .share-notification.show {
            transform: translateY(0);
            opacity: 1;
        }

        /* 玩法介绍样式 */
        .game-tutorial {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.8);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 2000;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.3s, visibility 0.3s;
        }

        .game-tutorial.show {
            opacity: 1;
            visibility: visible;
        }

        .tutorial-content {
            background: var(--card-background);
            padding: 30px;
            border-radius: 20px;
            max-width: 500px;
            max-height: 80vh;
            overflow-y: auto;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
            position: relative;
        }

        .tutorial-close {
            position: absolute;
            top: 15px;
            right: 20px;
            background: none;
            border: none;
            font-size: 24px;
            cursor: pointer;
            color: var(--text-color);
            opacity: 0.7;
            transition: opacity 0.3s;
        }

        .tutorial-close:hover {
            opacity: 1;
        }

        .tutorial-content h2 {
            color: var(--primary-color);
            margin-bottom: 20px;
            text-align: center;
        }

        .tutorial-section {
            margin-bottom: 20px;
        }

        .tutorial-section h3 {
            color: var(--secondary-color);
            margin-bottom: 10px;
            font-size: 1.1rem;
        }

        .tutorial-section p {
            line-height: 1.6;
            margin-bottom: 8px;
        }

        .tutorial-section ul {
            padding-left: 20px;
        }

        .tutorial-section li {
            margin-bottom: 5px;
        }

        .fruit-preview {
            display: flex;
            align-items: center;
            gap: 10px;
            margin: 5px 0;
            padding: 5px;
            background: var(--tip-background);
            border-radius: 8px;
        }

        .fruit-preview .fruit-icon {
            font-size: 1.5rem;
        }

        .help-button {
            position: fixed;
            bottom: 20px;
            left: 20px;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background: var(--primary-color);
            color: white;
            border: none;
            cursor: pointer;
            font-size: 20px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
            transition: all 0.3s ease;
            z-index: 1000;
        }

        .help-button:hover {
            background: var(--secondary-color);
            transform: scale(1.1);
        }

        /* 页脚样式 */
        footer {
            margin-top: 30px;
            text-align: center;
            font-size: 14px;
            color: var(--text-color);
            opacity: 0.8;
            padding-top: 15px;
            border-top: 1px solid var(--border-color);
        }

        /* 响应式设计 */
        @media (max-width: 768px) {
            header {
                flex-direction: column;
                gap: 15px;
                text-align: center;
            }

            .game-container {
                width: 350px;
                height: 500px;
            }

            .game-info {
                max-width: 350px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1><i class="fas fa-apple-alt"></i> 合成大西瓜</h1>
            <div class="header-controls">
                <div class="theme-toggle">
                    <input type="checkbox" id="theme-switch" class="theme-switch">
                    <label for="theme-switch" class="theme-switch-label">
                        <i class="fas fa-sun"></i>
                        <i class="fas fa-moon"></i>
                        <span class="slider"></span>
                    </label>
                </div>
                <div class="share-button" id="share-button" title="分享给朋友">
                    <i class="fas fa-share-alt"></i>
                    <span>分享</span>
                </div>
            </div>
        </header>
        
        <main>
            <div class="game-info">
                <div class="score-display">
                    得分: <span id="score">0</span>
                </div>
                <div class="level-display">
                    最高: <span id="highest-fruit">葡萄</span>
                </div>
            </div>
            
            <div class="game-container">
                <div class="game-area" id="game-area">
                    <div class="danger-line"></div>
                </div>
                <div class="game-over" id="game-over">
                    <div class="game-over-content">
                        <h2>游戏结束</h2>
                        <div class="final-score">最终得分: <span id="final-score">0</span></div>
                        <button class="control-btn" onclick="restartGame()">重新开始</button>
                    </div>
                </div>
            </div>
            
            <div class="game-controls">
                <button class="control-btn" onclick="restartGame()">重新开始</button>
                <button class="control-btn" onclick="pauseGame()" id="pause-btn">暂停</button>
                <button class="control-btn" onclick="showTutorial()">玩法说明</button>
            </div>
        </main>
        
        <footer>
            <p>🍉 合成大西瓜 - 策略与运气的完美结合 🍉</p>
        </footer>
    </div>

    <script>
        // 游戏状态
        let gameState = {
            score: 0,
            highestFruit: 1,
            isGameOver: false,
            isPaused: false,
            fruits: [],
            nextFruit: null,
            dropPosition: 200
        };

        // 水果配置
        const fruitConfig = {
            1: { name: '葡萄', emoji: '🍇', score: 1 },
            2: { name: '樱桃', emoji: '🍒', score: 3 },
            3: { name: '橘子', emoji: '🍊', score: 6 },
            4: { name: '柠檬', emoji: '🍋', score: 10 },
            5: { name: '猕猴桃', emoji: '🥝', score: 15 },
            6: { name: '西红柿', emoji: '🍅', score: 21 },
            7: { name: '桃子', emoji: '🍑', score: 28 },
            8: { name: '菠萝', emoji: '🍍', score: 36 },
            9: { name: '椰子', emoji: '🥥', score: 45 },
            10: { name: '西瓜', emoji: '🍉', score: 55 }
        };

        // DOM 元素
        const gameArea = document.getElementById('game-area');
        const scoreElement = document.getElementById('score');
        const highestFruitElement = document.getElementById('highest-fruit');
        const gameOverElement = document.getElementById('game-over');
        const finalScoreElement = document.getElementById('final-score');
        const pauseBtn = document.getElementById('pause-btn');
        const themeSwitch = document.getElementById('theme-switch');
        const shareButton = document.getElementById('share-button');

        // 初始化游戏
        function initGame() {
            gameState = {
                score: 0,
                highestFruit: 1,
                isGameOver: false,
                isPaused: false,
                fruits: [],
                nextFruit: null,
                dropPosition: 200
            };
            
            gameArea.innerHTML = '<div class="danger-line"></div>';
            updateUI();
            generateNextFruit();
            
            // 加载保存的数据
            const savedScore = localStorage.getItem('xigua-best-score');
            if (savedScore) {
                document.getElementById('highest-fruit').textContent = `最高分: ${savedScore}`;
            }
        }

        // 生成下一个水果
        function generateNextFruit() {
            const level = Math.random() < 0.7 ? 1 : (Math.random() < 0.9 ? 2 : 3);
            gameState.nextFruit = level;
            
            // 显示下一个水果预览
            const existingNext = document.querySelector('.next-fruit');
            if (existingNext) {
                existingNext.remove();
            }
            
            const nextFruit = createFruitElement(level, gameState.dropPosition, 60);
            nextFruit.classList.add('next-fruit');
            nextFruit.style.pointerEvents = 'none';
            gameArea.appendChild(nextFruit);
        }

        // 创建水果元素
        function createFruitElement(level, x, y) {
            const fruit = document.createElement('div');
            fruit.className = `fruit fruit-${level}`;
            fruit.textContent = fruitConfig[level].emoji;
            fruit.style.left = `${x - getFruitSize(level)/2}px`;
            fruit.style.top = `${y}px`;
            fruit.dataset.level = level;
            fruit.dataset.id = Date.now() + Math.random();
            return fruit;
        }

        // 获取水果大小
        function getFruitSize(level) {
            const sizes = [0, 30, 35, 40, 45, 50, 55, 60, 70, 80, 100];
            return sizes[level] || 30;
        }

        // 投放水果
        function dropFruit(x) {
            if (gameState.isGameOver || gameState.isPaused || !gameState.nextFruit) return;
            
            const level = gameState.nextFruit;
            const fruit = createFruitElement(level, x, 100);
            
            gameArea.appendChild(fruit);
            gameState.fruits.push({
                element: fruit,
                level: level,
                x: x,
                y: 100,
                vx: 0,
                vy: 0,
                id: fruit.dataset.id
            });
            
            // 移除预览
            const nextFruit = document.querySelector('.next-fruit');
            if (nextFruit) {
                nextFruit.remove();
            }
            
            generateNextFruit();
            startPhysics();
        }

        // 简单物理引擎
        function startPhysics() {
            const gravity = 0.5;
            const friction = 0.98;
            
            function updatePhysics() {
                if (gameState.isGameOver || gameState.isPaused) return;
                
                gameState.fruits.forEach(fruit => {
                    // 重力
                    fruit.vy += gravity;
                    
                    // 更新位置
                    fruit.x += fruit.vx;
                    fruit.y += fruit.vy;
                    
                    // 边界碰撞
                    const size = getFruitSize(fruit.level);
                    if (fruit.x - size/2 < 0) {
                        fruit.x = size/2;
                        fruit.vx *= -0.5;
                    }
                    if (fruit.x + size/2 > 400) {
                        fruit.x = 400 - size/2;
                        fruit.vx *= -0.5;
                    }
                    if (fruit.y + size/2 > 600) {
                        fruit.y = 600 - size/2;
                        fruit.vy = 0;
                        fruit.vx *= friction;
                    }
                    
                    // 更新DOM位置
                    fruit.element.style.left = `${fruit.x - size/2}px`;
                    fruit.element.style.top = `${fruit.y - size/2}px`;
                });
                
                // 检查碰撞和合并
                checkCollisions();
                
                // 检查游戏结束
                checkGameOver();
                
                requestAnimationFrame(updatePhysics);
            }
            
            updatePhysics();
        }

        // 检查碰撞
        function checkCollisions() {
            for (let i = 0; i < gameState.fruits.length; i++) {
                for (let j = i + 1; j < gameState.fruits.length; j++) {
                    const fruit1 = gameState.fruits[i];
                    const fruit2 = gameState.fruits[j];
                    
                    const dx = fruit1.x - fruit2.x;
                    const dy = fruit1.y - fruit2.y;
                    const distance = Math.sqrt(dx * dx + dy * dy);
                    const radius1 = getFruitSize(fruit1.level) / 2;
                    const radius2 = getFruitSize(fruit2.level) / 2;
                    const minDistance = radius1 + radius2;
                    
                    // 更精确的碰撞检测 - 只有当水果边缘真正接触时才触发
                    if (distance <= minDistance && distance > 0) {
                        // 计算重叠程度
                        const overlap = minDistance - distance;
                        
                        // 只有当有实际重叠时才进行物理响应
                        if (overlap > 0) {
                            // 计算分离向量
                            const separationX = (dx / distance) * overlap * 0.5;
                            const separationY = (dy / distance) * overlap * 0.5;
                            
                            // 分离水果
                            fruit1.x += separationX;
                            fruit1.y += separationY;
                            fruit2.x -= separationX;
                            fruit2.y -= separationY;
                            
                            // 计算相对速度
                            const relativeVelocityX = fruit1.vx - fruit2.vx;
                            const relativeVelocityY = fruit1.vy - fruit2.vy;
                            const relativeVelocity = relativeVelocityX * (dx / distance) + relativeVelocityY * (dy / distance);
                            
                            // 只有当物体正在相互靠近时才应用碰撞响应
                             if (relativeVelocity < 0) {
                                 const restitution = 0.7; // 稍微提高弹性系数
                                 const impulse = -(1 + restitution) * relativeVelocity / 2; // 修正冲量计算
                                 
                                 // 应用冲量
                                 const impulseX = impulse * (dx / distance);
                                 const impulseY = impulse * (dy / distance);
                                 
                                 fruit1.vx += impulseX;
                                 fruit1.vy += impulseY;
                                 fruit2.vx -= impulseX;
                                 fruit2.vy -= impulseY;
                                 
                                 // 添加随机滚动效果，防止垂直堆叠
                                 const randomRoll = (Math.random() - 0.5) * 3; // -1.5 到 1.5 的随机值
                                 
                                 // 如果碰撞主要是垂直的（dy > dx），添加更多水平随机性
                                 if (Math.abs(dy) > Math.abs(dx)) {
                                     fruit1.vx += randomRoll;
                                     fruit2.vx -= randomRoll;
                                 } else {
                                     // 水平碰撞时添加较小的随机扰动
                                     fruit1.vx += randomRoll * 0.3;
                                     fruit2.vx -= randomRoll * 0.3;
                                 }
                             }
                        }
                        
                        // 检查是否可以合并（相同等级且小于西瓜，需要更紧密接触）
                        if (fruit1.level === fruit2.level && fruit1.level < 10 && overlap > minDistance * 0.1) {
                            mergeFruits(fruit1, fruit2, i, j);
                            return;
                        }
                    }
                }
            }
        }

        // 合并水果
        function mergeFruits(fruit1, fruit2, index1, index2) {
            const newLevel = fruit1.level + 1;
            const newX = (fruit1.x + fruit2.x) / 2;
            const newY = (fruit1.y + fruit2.y) / 2;
            
            // 创建合并特效
            createMergeEffect(newX, newY);
            
            // 增加分数
            const points = fruitConfig[newLevel].score;
            gameState.score += points;
            createScoreAnimation(newX, newY, `+${points}`);
            
            // 更新最高水果
            if (newLevel > gameState.highestFruit) {
                gameState.highestFruit = newLevel;
            }
            
            // 移除旧水果
            fruit1.element.remove();
            fruit2.element.remove();
            gameState.fruits.splice(Math.max(index1, index2), 1);
            gameState.fruits.splice(Math.min(index1, index2), 1);
            
            // 创建新水果
            if (newLevel <= 10) {
                const newFruit = createFruitElement(newLevel, newX, newY);
                gameArea.appendChild(newFruit);
                gameState.fruits.push({
                    element: newFruit,
                    level: newLevel,
                    x: newX,
                    y: newY,
                    vx: 0,
                    vy: -2,
                    id: newFruit.dataset.id
                });
            }
            
            updateUI();
            
            // 检查是否合成了西瓜
            if (newLevel === 10) {
                setTimeout(() => {
                    alert('🎉 恭喜！你成功合成了大西瓜！ 🍉');
                }, 500);
            }
        }

        // 创建合并特效
        function createMergeEffect(x, y) {
            const effect = document.createElement('div');
            effect.className = 'merge-effect';
            effect.style.left = `${x - 50}px`;
            effect.style.top = `${y - 50}px`;
            gameArea.appendChild(effect);
            
            setTimeout(() => {
                effect.remove();
            }, 600);
        }

        // 创建分数动画
        function createScoreAnimation(x, y, text) {
            const animation = document.createElement('div');
            animation.className = 'score-animation';
            animation.textContent = text;
            animation.style.left = `${x}px`;
            animation.style.top = `${y}px`;
            gameArea.appendChild(animation);
            
            setTimeout(() => {
                animation.remove();
            }, 1500);
        }

        // 检查游戏结束
        function checkGameOver() {
            const dangerY = 80;
            for (let fruit of gameState.fruits) {
                if (fruit.y - getFruitSize(fruit.level)/2 < dangerY && fruit.vy <= 0) {
                    gameOver();
                    return;
                }
            }
        }

        // 游戏结束
        function gameOver() {
            gameState.isGameOver = true;
            finalScoreElement.textContent = gameState.score;
            gameOverElement.style.display = 'flex';
            
            // 保存最高分
            const bestScore = localStorage.getItem('xigua-best-score') || 0;
            if (gameState.score > bestScore) {
                localStorage.setItem('xigua-best-score', gameState.score);
            }
        }

        // 重新开始游戏
        function restartGame() {
            gameOverElement.style.display = 'none';
            initGame();
        }

        // 暂停/继续游戏
        function pauseGame() {
            gameState.isPaused = !gameState.isPaused;
            pauseBtn.textContent = gameState.isPaused ? '继续' : '暂停';
        }

        // 更新UI
        function updateUI() {
            scoreElement.textContent = gameState.score;
            highestFruitElement.textContent = fruitConfig[gameState.highestFruit].name;
        }

        // 鼠标/触摸事件
        gameArea.addEventListener('click', (e) => {
            if (gameState.isGameOver || gameState.isPaused) return;
            
            const rect = gameArea.getBoundingClientRect();
            const x = e.clientX - rect.left;
            gameState.dropPosition = Math.max(50, Math.min(350, x));
            
            // 更新预览位置
            const nextFruit = document.querySelector('.next-fruit');
            if (nextFruit) {
                nextFruit.style.left = `${gameState.dropPosition - getFruitSize(gameState.nextFruit)/2}px`;
            }
        });

        gameArea.addEventListener('dblclick', (e) => {
            const rect = gameArea.getBoundingClientRect();
            const x = e.clientX - rect.left;
            dropFruit(x);
        });

        // 键盘控制
        document.addEventListener('keydown', (e) => {
            if (gameState.isGameOver) return;
            
            switch(e.code) {
                case 'Space':
                    e.preventDefault();
                    dropFruit(gameState.dropPosition);
                    break;
                case 'ArrowLeft':
                    gameState.dropPosition = Math.max(50, gameState.dropPosition - 20);
                    const nextLeft = document.querySelector('.next-fruit');
                    if (nextLeft) {
                        nextLeft.style.left = `${gameState.dropPosition - getFruitSize(gameState.nextFruit)/2}px`;
                    }
                    break;
                case 'ArrowRight':
                    gameState.dropPosition = Math.min(350, gameState.dropPosition + 20);
                    const nextRight = document.querySelector('.next-fruit');
                    if (nextRight) {
                        nextRight.style.left = `${gameState.dropPosition - getFruitSize(gameState.nextFruit)/2}px`;
                    }
                    break;
                case 'KeyP':
                    pauseGame();
                    break;
                case 'KeyR':
                    restartGame();
                    break;
            }
        });

        // 主题切换功能
        function setTheme(theme) {
            document.documentElement.setAttribute('data-theme', theme);
            localStorage.setItem('theme', theme);
            themeSwitch.checked = theme === 'dark';
        }

        themeSwitch.addEventListener('change', () => {
            setTheme(themeSwitch.checked ? 'dark' : 'light');
        });

        // 初始化主题
        const savedTheme = localStorage.getItem('theme') || 
            (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
        setTheme(savedTheme);

        // 分享功能
        shareButton.addEventListener('click', async () => {
            navigator.clipboard.writeText(window.location.href).then(() => {
                showNotification('链接已复制到剪贴板！快来挑战合成大西瓜吧！');
            }).catch(() => {
                showNotification('复制失败，请手动复制链接');
            });
        });

        // 显示通知函数
        function showNotification(message) {
            const notification = document.getElementById('share-notification');
            notification.textContent = message;
            notification.classList.add('show');
            setTimeout(() => {
                notification.classList.remove('show');
            }, 2000);
        }

        // 显示/隐藏玩法说明
        function showTutorial() {
            document.getElementById('game-tutorial').classList.add('show');
        }
        
        function hideTutorial() {
            document.getElementById('game-tutorial').classList.remove('show');
        }
        
        // 点击遮罩关闭教程
        document.getElementById('game-tutorial').addEventListener('click', (e) => {
            if (e.target.id === 'game-tutorial') {
                hideTutorial();
            }
        });
        
        // ESC键关闭教程
        document.addEventListener('keydown', (e) => {
            if (e.code === 'Escape') {
                hideTutorial();
            }
        });

        // 初始化游戏
        initGame();
        
        // 首次访问显示教程
        if (!localStorage.getItem('xigua-tutorial-shown')) {
            setTimeout(() => {
                showTutorial();
                localStorage.setItem('xigua-tutorial-shown', 'true');
            }, 1000);
        }
    </script>
    
    <div id="share-notification" class="share-notification"></div>
    
    <!-- 帮助按钮 -->
    <button class="help-button" onclick="showTutorial()" title="查看玩法说明">
        <i class="fas fa-question"></i>
    </button>
    
    <!-- 玩法介绍弹窗 -->
    <div class="game-tutorial" id="game-tutorial">
        <div class="tutorial-content">
            <button class="tutorial-close" onclick="hideTutorial()">&times;</button>
            <h2>🍉 合成大西瓜 - 玩法说明</h2>
            
            <div class="tutorial-section">
                <h3>🎯 游戏目标</h3>
                <p>通过投放和合成水果，最终合成出大西瓜！相同的水果碰撞后会合成更大的水果。</p>
            </div>
            
            <div class="tutorial-section">
                <h3>🕹️ 操作方法</h3>
                <ul>
                    <li><strong>鼠标操作：</strong>点击游戏区域移动投放位置，双击投放水果</li>
                    <li><strong>键盘操作：</strong></li>
                    <li>　• 空格键：投放水果</li>
                    <li>　• 左右箭头：移动投放位置</li>
                    <li>　• P键：暂停/继续游戏</li>
                    <li>　• R键：重新开始游戏</li>
                </ul>
            </div>
            
            <div class="tutorial-section">
                <h3>🍇 水果等级</h3>
                <div class="fruit-preview">
                    <span class="fruit-icon">🍇</span>
                    <span>葡萄 → 🍒 樱桃 → 🍊 橘子 → 🍋 柠檬 → 🥝 猕猴桃</span>
                </div>
                <div class="fruit-preview">
                    <span class="fruit-icon">🍅</span>
                    <span>西红柿 → 🍑 桃子 → 🍍 菠萝 → 🥥 椰子 → 🍉 西瓜</span>
                </div>
            </div>
            
            <div class="tutorial-section">
                <h3>📏 游戏规则</h3>
                <ul>
                    <li>两个相同等级的水果碰撞会合成下一级水果</li>
                    <li>水果会受到重力影响自然下落</li>
                    <li>水果之间有物理碰撞效果，会相互推挤</li>
                    <li>水果超过红色危险线且停止移动时游戏结束</li>
                    <li>合成更高级的水果可以获得更多分数</li>
                </ul>
            </div>
            
            <div class="tutorial-section">
                <h3>💡 游戏技巧</h3>
                <ul>
                    <li>尽量让相同的水果靠近，方便合成</li>
                    <li>注意控制水果堆叠的高度</li>
                    <li>利用物理碰撞让水果滚动到合适位置</li>
                    <li>优先合成体积较大的水果来节省空间</li>
                </ul>
            </div>
        </div>
    </div>
</body>
</html>